<template>
  <el-dialog
    :title="showTitle"
    :visible="showDialog"
    @close="cancel"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="部门名称" prop="name">
        <el-input
          v-model="formData.name"
          style="width: 80%;"
          placeholder="请输入1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input
          v-model="formData.code"
          style="width: 80%;"
          placeholder="请输入1-50个字符"
        />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="formData.manager"
          style="width: 80%;"
          placeholder="请选择部门负责人"
          @focus="getEmployees"
        >
          <el-option
            v-for="item in peoples"
            :key="item.id"
            :value="item.username"
            :label="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          v-model="formData.introduce"
          type="textarea"
          style="width: 80%;"
          placeholder="1-300个字符"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-row type="flex" justify="center">
        <el-button
          size="mini"
          type="primary"
          @click="submit"
        >确定</el-button>
        <el-button size="mini" @click="cancel">取消</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
// 1、点击部门负责人的时候请求接口数据，然后打印
// 2、获取到的数据展示在页面里面下拉选项
import { addDepartApi, getDepartDetail, getDepartList, updateDepartsApi } from '@/api/departments'
import { getEmployeesApi } from '@/api/employees'

export default {
  name: 'AddDept',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    // 当前点击的部门信息对象
    treeNode: {
      type: Object,
      // 默认空对象
      default: () => ({})
    }
  },
  data() {
    /**
     * 1、新增逻辑：找到当前点击部门的儿子和用户输入的name做对比，查重
     * 2、编辑逻辑：找到当前点击部门的同级部门(去除自己)，进行查重
     */
    const checkName = async(rules, value) => {
      // 找当前部门的子部门
      // 1、拿到所有的部门信息数据
      const { depts } = await getDepartList()
      console.log(depts)
      // 2、找到当前点击部门的子部门数据(找儿子)
      console.log(this.treeNode.id) // undefined

      // 如果是编辑的场景，currentChidren应该是当前点击部门的同级部门（去除自己）
      let currentChildren
      if (this.formData.id) {
      //   编辑
      //   找的是同级
        currentChildren = depts.filter(item => item.pid === this.treeNode.pid && item.id !== this.treeNode.id)
      } else {
      //   新增
      //   当前点击部门的子部门
        currentChildren = depts.filter(item => item.pid === this.treeNode.id)
      }
      // console.log(currentChildren)
      // 3、拿当前输入到表单里面的内容和找到的儿子作比较，如果name有重复的，表示校验失败，否则校验成功
      // 如果isRepeat返回true，表示找到重复的名字了，如果返回false，表示名字不重复
      const isRepeat = currentChildren.some(item => item.name === value)
      if (isRepeat) {
        //   证明表单校验失败,重复了
        //   return一个失败的promise表示当前表单校验失败
        //   如果什么都不返回，表示校验成功
        return Promise.reject(new Error('重复了'))
      }
    }
    // 检测部门编码逻辑
    // 所有的部门的编码都不可以重复
    /*
    * 1、编辑的场景需要和别人作比较
    */
    const checkCode = async(rules, value) => {
      // 1、获取到所有的部门信息数据
      // 编辑的时候，把自己去掉和其他人对比
      const { depts } = await getDepartList()
      let isRepeat
      if (this.formData.id) {
        //   编辑，把自己去掉和其他人比较
        isRepeat = depts.some(item => item.code === value && item.id !== this.treeNode.id)
      } else {
        //   新增，和所有人对比
        isRepeat = depts.some(item => item.code === value)
      }
      // 2、判断当前用户输入的内容和所有的部门的code不能有相同的
      // 如果返回true，表示有相同的，返回false表示没有相同的

      if (isRepeat) {
        // 如果相同，返回失败的promise，表示校验失败
        return Promise.reject(new Error('部门编码不能重复'))
      }
    }

    return {
      peoples: [],
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          {
            validator: checkName,
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          {
            validator: checkCode,
            trigger: 'blur'
          }
        ],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }],
        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符' }]
      }
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑部门' : '新增部门'
    }
  },
  methods: {
    cancel() {
      // 通知父组件关闭弹层
      // 关弹层的时候我们还要做什么事情
      // 重置表单
      // 1、重置表单的时候，只会重置表单已经绑定的数据，其他的是不会被重置的
      // 2、所以需要手动重置表单的数据
      this.formData = {
        code: '',
        name: '',
        manager: '',
        introduce: ''
      }
      this.$refs.formRef.resetFields() // 重置表单数据和校验
      this.$emit('update:showDialog', false)
    },
    // 下拉框获取焦点的时候,调用获取员工数据的方法
    async getEmployees() {
      this.peoples = await getEmployeesApi()
    },
    // 根据id获取详情数据
    // 获取到的详情数据覆盖formData
    async getDepartsDetail(id) {
      const res = await getDepartDetail(id)
      // 覆盖表单数据(数据回显)
      this.formData = res
    },
    async submit() {
      // 1、校验表单
      await this.$refs.formRef.validate()
      // 新增的功能/编辑的功能
      if (this.formData.id) {
        //   编辑
        await updateDepartsApi(this.formData)
        this.$message.success('编辑成功')
      } else {
        //   新增
        // 2、提交数据调用接口
        await addDepartApi({
          ...this.formData,
          pid: this.treeNode.id // 当前新增部门的父级的id（点击部门的id）
        })

        this.$message.success('新增成功')
      }
      //   3、关闭弹层，给用户成功的提示
      this.cancel()
      // 根据不同的场景进行不同的提示
      // this.$message.success(this.formData.id ? '编辑成功' : '新增成功')
      //   4、刷新组织架构的数据（新增了一条数据）
      // 触发父组件更新数据的方法，重新渲染界面
      this.$emit('getDeparts')
    }
  }
}
</script>

<style scoped>

</style>
